<template>
    <nav class="nav">
        <router-link to="/home" active-class="activ">
            <span class="icon_home"></span>
            <span class="text">首页</span>
        </router-link>
        <router-link active-class="activ" to="/product">
            <span class="icon_product"></span>
            <span class="text">产品库</span>
        </router-link>
        <router-link active-class="activ" to="/find" v-show="userLevel==1">
            <span class="icon_find"></span>
            <span class="text">发现</span>
        </router-link>
        <router-link active-class="activ" to="/user">
            <span class="icon_user"></span>
            <span class="text">我的</span>
        </router-link>
    </nav>
</template>
<script>
export default {
    mounted() {
        this.userLevel = "1"
    },
    data() {
        return {
            userLevel: ''
        }
    }
}
</script>
<style scoped>
.nav {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}

a {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #7b7b7b;
    text-decoration: none;
    font-size: .5rem;
    background: #FFF;
    text-align: center;
}

.activ {
    color: #95deda;
    background: #fff;
}

.icon_home {
    width: 100%;
    height: 70%;
    background: url(/src/assets/img/navBar/icon_home.png) no-repeat center center;
    background-size: 23%;
}

.icon_product {
    background: url(/src/assets/img/navBar/icon_pro.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 23%;
}

.icon_find {
    background: url(/src/assets/img/navBar/icon_find.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 23%;
}

.icon_user {
    background: url(/src/assets/img/navBar/icon_user.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 23%;
}

.activ .icon_home {
    background: url(/src/assets/img/navBar/icon_home1.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 30%;
    animation: mymove ease-in .8s;
}

.activ .icon_product {
    background: url(/src/assets/img/navBar/icon_pro1.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 30%;
    animation: mymove ease-out .6s;
}

.activ .icon_find {
    background: url(/src/assets/img/navBar/icon_find1.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 30%;
    animation: rot ease-out 1s;
}

.activ .icon_user {
    background: url(/src/assets/img/navBar/icon_user1.png) no-repeat center center;
    width: 100%;
    height: 70%;
    background-size: 30%;
    animation: rot1 1s;
}

@-webkit-keyframes mymove {
    0% {
        background-size: 30%;
        background-position: center -25px;
    }
    20% {
        background-size: 30%;
        background-position: center 10px;
    }
    40% {
        background-size: 30%;
        background-position: center -15px;
    }
    60% {
        background-size: 30%;
        background-position: center 5px;
    }
    80% {
        background-size: 30%;
        background-position: center 0;
    }
    100% {
        background-size: 30%;
        background-position: center center;
    }
}

@-webkit-keyframes rot {
    0% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(0deg)
    }
    50%{
        background-size: 30%;
        background-position: center center;
        transform: rotate(360deg)
    }
    100% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(0deg)
    }
}

@-webkit-keyframes rot1 {
    0% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(180deg);
        transform-origin:47px 9px;
    }
    20% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(0deg);
        transform-origin:47px 9px;
    }
    40% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(90deg);
        transform-origin:47px 9px;
    }
    50% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(0deg);
        transform-origin:47px 9px;
    }
    60% {
        background-size: 30%;
        background-position: center center;
        transform:rotate(45deg);
        transform-origin:47px 9px;
    }
    70%{
        background-size: 30%;
        background-position: center center;
        transform:rotate(0deg);
        transform-origin:47px 9px;
    }
    80% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(15deg);
        transform-origin:47px 9px;
    }
    90%{
        background-size: 30%;
        background-position: center center;
        transform:rotate(0deg);
        transform-origin:47px 9px;
    }
    95%{
        background-size: 30%;
        background-position: center center;
        transform:rotate(5deg);
        transform-origin:47px 9px;
    }
    100% {
        background-size: 30%;
        background-position: center center;
        transform: rotate(0deg);
        transform-origin:47px 9px;
    }
}
</style>
